<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>一个简易的排序按钮</title>
<script src="./jquery-3.7.1.js"></script>
<script src="./ofd.umd.js"></script>
</head>
<body>
<input type="file"ref="file" class="hidden" accept=".ofd" onchange="fileChanged(event)"/>
<div id="ofdContainer" style="width:100%;height:800px"></div>
<script>
    function fileChanged(e) {
        //获取文件数据
        const file = e.target.files[0];
        // 转换ofd文档
        ofd.parseOfdDocument({
            ofd: file,
            success: function (res){
                const screenWidth = 800;
                const ofdRenderRes = ofd.renderOfd(screenWidth, res[0]);
                let ofdContainerDiv = document.getElementById('ofdContainer');
                ofdContainerDiv.innerHTML='';
                for (const item of ofdRenderRes){
                    ofdContainerDiv.appendChild(item);
                }
            },
            fail:function (err){
                console.error('ofd文件渲染失败',err);
            }
        });
    }
    // ofd文件保存在服务器上:
    var url='';// ofd文件的地址url，后台接口返回的
    if(url!='')
    {
        $.ajax({
            url:url,
            type:"GET",
            contentType:false,
            processData:false,
            xhrFields:{responseType:"arraybuffer"},
            success: function(data) {
                ofd.parseOfdDocument({
                    ofd: data,
                    success: function (res){
                        var screenWidth = 800;
                        var ofdRenderRes = ofdrenderofd(screenWidth, res[0]);
                        var ofdContainerDiv = document.getElementById('ofdContainer');// 清空元素
                        ofdContainerDiv.innerHTML='';
                        for (const item of ofdRenderRes){
                            ofdContainerDiv.appendChild(item);
                        }
                    },
                    fail:function (err){
                        console.error('ofd文件渲染失败',err);
                    }
                });
            }
        });
    }




</script>
